<!-- 相当于给模板定义一个名字 define end 成对出现 -->
 {{ define "backstage/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫商城</title>
    <link rel="shortcut icon" href="/static/images/tianmao.jpg" type="image/x-icon">
    <style>
        .back-index{
            margin: 10px;
            height: 100vh;
            .back-top{
                height: 80px;
                background-color: antiquewhite;
                display: flex;
                align-items: center;
                .top-title{
                    color: rgb(14, 169, 92);
                    margin-left: 40px;
                    font-size: 24px;
                    flex: 1;
                }
                .top-info{
                    flex: 1;
                    text-align: right;
                    margin-right: 40px;
                    .user-name{
                        margin-right: 20px;
                        color: rgb(12, 82, 213);
                        font-size: 15px;
                        padding: 5px;
                        border: 1px solid white;
                        border-radius: 20px;
                        background-color: white;
                    }
                    .exit {
                        border: 1px solid white;
                        border-radius: 10px;
                        background-color: white;
                        color: rgb(188, 84, 84);
                        font-weight: bold;
                        padding: 5px;
                        cursor: pointer;
                    }
                }
            }
            .back-bot{
                display: flex;
                .back-left{
                    flex: 1;
                    height: 80vh;
                    background-color: antiquewhite;
                    margin-top: 10px;
                    text-align: center;
                    font-size: 16px;
                    .bar-area{
                        padding-top: 20px;
                        .back-bar{
                            margin: 10px;
                            padding: 10px;
                            background-color: aliceblue;
                            cursor: pointer;
                            /* color: cornflowerblue; */
                        }
                    }
                }
                .back-right{
                    flex: 5;
                    height: 80vh;
                    background-color: rgb(241, 235, 227);
                    margin-top: 10px;
                    margin-left: 10px;
                }
            }
        }
    </style>
</head>
<body>
    <div class="back-index">
        <div class="back-top">
            <div class="top-title">天猫商城后台管理系统</div>
            <div class="top-info"><span class="user-name">{{.userName}}</span><button class="exit" onclick="exitLogin()">退出登录</button></div>
        </div>
        <div class="back-bot">
            <div class="back-left">
                <div class="bar-area">
                    <div class="back-bar" style="color:{{if eq .barKey 1}} rgb(210, 56, 153) {{else}} cornflowerblue {{end}};" onclick="clickTab(1)">欢迎</div>
                    <div class="back-bar" style="color:{{if eq .barKey 2}} rgb(210, 56, 153) {{else}} cornflowerblue {{end}};" onclick="clickTab(2)">用户管理</div>
                    <div class="back-bar" style="color:{{if eq .barKey 3}} rgb(210, 56, 153) {{else}} cornflowerblue {{end}};" onclick="clickTab(3)">商品管理</div>
                    <div class="back-bar" style="color:{{if eq .barKey 4}} rgb(210, 56, 153) {{else}} cornflowerblue {{end}};" onclick="clickTab(4)">我的</div>
                </div>
            </div>
            <div class="back-right">
                {{if eq .barKey 1}}
                    {{template "backstage/welcome.html" .}}
                {{else if eq .barKey 2}}
                    {{template "backstage/userMgr.html" .}}
                {{else if eq .barKey 3}}
                    {{template "backstage/goodsMgr.html" .}}
                {{else}}
                    {{template "backstage/mine.html" .}}
                {{end}}
            </div>
        </div>
    </div>

    <script>
        function exitLogin(){
            location.href="/back/login";
        }

        function clickTab(key) {
            if(key==1){
                location.href="/back/welcome";
            } else if(key==2){
                location.href="/back/userMgr/curPage/1";
            } else if(key==3){
                location.href="/back/goodsMgr/curPage/1";
            } else {
                location.href="/back/mine/opt/0";
            }
        }
    </script>
</body>
</html>
{{ end }}